<template>
  <view class="root_box">
    <view class="content_box">
      <view class="show_box" v-show="current == -1">
        <view class="banner_wrap" :class="{ is_loading: loading }">
          <u-swiper
            :list="imageList"
            :autoplay="false"
            keyName="image"
            imgMode="aspectFit"
            height="100%"
            bgColor="#000"
            @click="onClick"
          ></u-swiper>
        </view>

        <view class="common_btn_box">
          <u--input
            placeholder="请输入内容"
            border="surround"
            v-model="page"
            type="number"
            clearable
          ></u--input>
          <view class="btn" hover-class="is_hover" @click="requestPage"
            >Jump</view
          >
        </view>

        <view class="common_btn_box">
          <view class="btn" hover-class="is_hover" @click="changePage(true)"
            >Pre</view
          >
          <view class="btn" hover-class="is_hover" @click="changePage(false)"
            >Next</view
          >
        </view>
      </view>

      <ymDetail
        v-for="(item, index) in subList"
        :key="item.key"
        v-show="current == item.key"
        :url="item.url"
        @close="onClose(item)"
      />
    </view>
    <view class="bttom_btn_box">
      <view
        class="btn"
        v-for="(item, index) in subList"
        :key="index"
        hover-class="is_hover"
        @click="current = item.key"
      >
        {{ index }}
      </view>
      <view class="btn" hover-class="is_hover" @click="current = -1">Home</view>
    </view>
  </view>
</template>

<script>
import ymDetail from "pages/image/ym_detail.vue";
export default {
  components: { ymDetail },
  data() {
    return {
      visible: { show: false },
      htmlStr: undefined,
      path: "https://www.ymxzj.com/category/beauty/page/",
      page: 1,
      imageList: [
        {
          href: "https://www.ymxzj.com/beauty/xiuren_2024_02_19_no_8109_yuzijiangfish/",
          image: "",
        },
        {
          href: "https://www.ymxzj.com/beauty/xiuren_2024_02_19_no_8109_yuzijiangfish/",
          image:
            "https://s.wujituku.com/re/24/12/content_6/86596_thumb_0_425_cover.webp",
        },
        {
          href: "https://www.ymxzj.com/beauty/xiuren_2024_02_19_no_8108_linyouyi/",
          image:
            "https://s.wujituku.com/re/24/12/content_6/86595_thumb_0_425_cover.webp",
        },
      ],
      // imageList: undefined,
      loading: false,
      current: -1,
      subList: [],
    };
  },
  methods: {
    requestPage() {
      this.loading = true;
      const url = this.path + this.page + "/";
      uni.setStorageSync("ymPage", this.page);
      console.log("url：", url);
      // 发起 GET 请求
      uni.request({
        url: url,
        method: "GET", // 指定请求方法为 GET
        success: (res) => {
          console.log("res：", res);
          this.htmlStr = res.data;
          this.parseHtmlStr();
        },
        fail: (error) => {
          console.error("请求失败:", error); // 处理请求失败的情况
          this.htmlStr = error;
        },
      });
    },
    parseHtmlStr() {
      const articleList = this.htmlStr.split("<article");
      articleList.splice(0, 1);
      this.imageList = articleList.map((article, index) => {
        const imgKey = "background-image:url(";
        const hrefKey = 'itemprop="url" href="';
        const titleKey = 'title="';
        if (index == 0) {
          const afterImgKey = article.substring(article.indexOf(imgKey) + imgKey.length);
          const src = afterImgKey.substring(0, afterImgKey.indexOf(")"));

          const afterHref = afterImgKey.substring(afterImgKey.indexOf(hrefKey) + hrefKey.length);
          const href = afterHref.substring(0, afterHref.indexOf('"'));

          const afterTitle = afterHref.substring(afterHref.indexOf(titleKey) + titleKey.length);
          const title = afterTitle.substring(0, afterTitle.indexOf('"'));
          const names = title.split(' ');
          const name = names[names.length - 1];

          return {
            href: href,
            image: src,
            name: name
          };
        } else {
          const afterHref = article.substring(article.indexOf(hrefKey) + hrefKey.length);
          const href = afterHref.substring(0, afterHref.indexOf('"'));

          const afterTitle = afterHref.substring(afterHref.indexOf(titleKey) + titleKey.length);
          const title = afterTitle.substring(0, afterTitle.indexOf('"'));
          const names = title.split(' ');
          const name = names[names.length - 1];

          const afterSrc = afterHref.substring(afterHref.indexOf('src="') + 5);
          const src = afterSrc.substring(0, afterSrc.indexOf('"'));


          return {
            href: href,
            image: src,
            name: name
          };
        }
      })
      console.log('this.imageList：', this.imageList);
      this.showImg = true;
    },
    changePage(isUp) {
      this.page = parseInt(this.page) + (isUp ? -1 : 1);
      this.requestPage();
    },
    onClick(index) {
      console.log("index：", index);
      // this.setIntent(this.imageList[index].href);
      // uni.navigateTo({ url: "/pages/image/ym_detail" });
      this.subList.push({
        url: this.imageList[index].href,
        key: new Date().getTime(),
      });
    },
    onClose(item) {
      const index = this.subList.findIndex((e) => e == item);
      this.subList.splice(index, 1);
      this.current = -1;
    },
  },
  mounted() {
    // this.requestPage();
    const page = uni.getStorageSync("ymPage");
    this.page = parseInt(page || "1");
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.root_box {
  height: 100vh;
  background: black;
}

.label_text {
  color: white;
  word-wrap: break-word;
  word-break: normal;
  white-space: pre-wrap;
}

.content_box {
  height: calc(100% - 65rpx);

  .show_box {
    height: 100%;

    .banner_wrap {
      height: calc(100% - 24rpx - 64rpx - 88rpx);
    }
  }
}

.bttom_btn_box {
  height: 64rpx;
  border-top: 1rpx solid white;
  display: flex;

  .btn {
    flex: 1;
    line-height: 64rpx;
    text-align: center;
    color: white;
  }
}
</style>

<style lang="scss">
.u-swiper__wrapper__item__wrapper__image > div {
  background-size: contain !important;
}

::v-deep .uni-input-wrapper {
  color: white;
}
</style>